import medicinalviewApi from "@/api/medicinalview";
import { mapGetters } from "vuex";
import VueElementLoading from 'vue-element-loading';

const BASE_URL = "https://image.zysuyuan.cn:8031";
var elementResizeDetectorMaker = require("element-resize-detector")

// 局域网测试
// const BASE_URL = "http://192.168.1.109:8031";

const components = {
    VueElementLoading
};

const data = function () {
    return {
        total: 0, //总记录数
        currentPage: 1, //当前页码
        pageSize: 5, // 每页显示5条数据
        img: "",
        BASE_URL,
        fit: "scale-down",
        lists: [],
        screenWidth: document.body.clientWidth,
        width: null,
        height: null,
        ischange: null,
        medicinal: ""
    };
};

const methods = {
    gotodescribe(e, index) {
        console.log(this.lists[index].id);
        // console.log(this.test);
        // 使用vuex保存药材信息
        const path = this.lists[index].imgPath;
        const mname = this.lists[index].mName;
        const mindex = index;
        const mid = this.lists[index].id;
        // 这里path和index是和store中actions方法里面的变量名意义对应，名字不对应无法传值
        this.$store.dispatch("addimagepath", { path, index });
        this.$store.dispatch("addmedicinal", { mname, mindex, mid });

        this.$router.push({
            // path: `/viewmessage/${this.names[index]}`,
            // 使用下列方法方法跳转路由，就不会出现点击tab后再次跳转的bug
            name: "viewmessage",
            params: {
                name: this.lists[index].mName, // 此为药品名称
                index: index, // 药材索引
                mid: this.lists[index].id // 药材id
                // imgpath: this.lists[index].img_path
            },
            // query: {
            //     mid: this.lists[index].id
            // }
        });
    },

    // 查询全部药材信息
    fetchData() {
        var vm = this.$store;
        vm.commit('updateLoading', true);
        console.log('是否开启加载', this.$store.state.elementloading.vueElementLoading);
        medicinalviewApi.zyMedicinalView(this.medicinal, this.currentPage, this.pageSize).then(resp => {
            this.lists = resp.data.rows;
            this.total = resp.data.total;
            if (resp.data.rows) {
                vm.commit('updateLoading', false);
                console.log('是否开启加载', this.$store.state.elementloading.vueElementLoading)
            }
            console.log(resp);
        });
    },

    imgStyle() {
        return {
            width: this.width + "px",
            height: this.height + "px"
        };
    },

    searchMedicinal() {
        // alert(this.medicinal);
        // console.log(this.medicinal);
        this.currentPage = 1;
        this.fetchData();
    },

    handleSizeChange(val) {
        console.log(`每页${val}条`);
        this.pageSize = val;
        this.fetchData();
    },
    handleCurrentChange(val) {
        console.log(`当前页${val}`);
        this.currentPage = val;
        this.fetchData();
    },

};


function created() {
    this.fetchData();
};

function mounted() {
    // window.onresize = () => {
    //     return (() => {
    //         window.screenWidth = document.getElementById('zyview-container').screenWidth
    //         this.screenWidth = window.screenWidth
    //     })()
    // }
    // this.$nextTick(() => {
    //     var erd = elementResizeDetectorMaker();
    //     erd.listenTo(document.getElementById("zyview-container"), function (element) {
    //       var width = element.offsetWidth
    //       var height = element.offsetHeight
    //       console.log("Size: " + width + "x" + height)
    //     })
    //     // 获取图片边框
    //     // var imgBox = this.$refs.zyimage.offsetHeight;
    // })

};

function updated() {

    let container = document.getElementById('zyview-container')
    // let width = container.offsetWidth
    // console.log('变量宽度', width)
    // console.log('是否变：', this.ischange)
    // console.log('是否展开', this.$store.state.app.sidebar.opened);
    // if (width > 1460) {
    //     this.ischange = true
    // }else {
    //     this.ischange = false
    // }
    // console.log('是否变：', this.ischange)

    // setTimeout(() => {
    //     var imgBox = document.getElementsByClassName("zyimage");
    //     // 获取其宽度
    //     // let wImgBox = imgBox[0].getBoundingClientRect().width;
    //     console.log('数组长度:',imgBox[0].scrollWidth);
    //     var newArr = [];
    //     // for (var i = 0; i < )
    // })
    // console.log('是否变：', this.ischange)
    // if (width > 1460) {
    //     this.ischange = true
    //     console.log('是否变：', this.ischange)
    // }

    // let container = document.getElementById('zyview-container')
    // let cwidth = container.offsetWidth
    // console.log('变量宽度',cwidth)

    let imgBox = this.$refs.zyimage;
    // 获取其宽度
    // let wImgbox = imgBox[0].getBoundingClientRect().width;
    // this.imgBox.height = 0.6 * wImgbox + 'px'
    // console.log('宽度', wImgbox);
    // console.log(imgBox);

    // let container = document.getElementById('zyview-container')
    // let cwidth = container.offsetWidth
    // console.log('变量宽度',cwidth)
    // var width, height
    // var erd = elementResizeDetectorMaker();
    // erd.listenTo(document.getElementById("zyview-container"), function (element) {
    //     width = element.offsetWidth
    //     console.log('变量宽度',width)
    //     //   this.width = width
    //     height = element.offsetHeight
    //     console.log("Size: " + width + "x" + height)
    // })
    // this.width = width
};

const computed = {
    listenHumbur() {
        return $store.state.app.sidebar.opened;
    },

    ...mapGetters(["sidebar", "avatar", "device"])
};

const watch = {
    // screenWidth(val) {
    //     // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
    //     if (!this.timer) {
    //         // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
    //         this.screenWidth = val
    //         this.timer = true
    //         let that = this
    //         setTimeout(function () {
    //             // 打印screenWidth变化的值
    //             console.log(that.screenWidth)
    //             that.timer = false
    //         }, 400)
    //     }
    // }

    '$store.state.app.sidebar.opened': function() {
        console.log('是否展开：++++++',this.$store.state.app.sidebar.opened)
        var isOpened = this.$store.state.app.sidebar.opened;
        if (isOpened) {
            this.ischange = false;
        } else {
            this.ischange = true
        }
    }

};

export default {
    BASE_URL,
    data,
    methods,
    created,
    mounted,
    watch,
    updated,
    computed,
    components
}

